<template>
  <k-form-modal
    ref="formRef"
    drawer
    class="invoice-content "
    width="middle"
    title="提现申请"
    label-width="90px"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <div class="title mb-10">开票记录</div>
    <el-form-item
      v-for="(item, index) in typeAttrOptions"
      :key="index"
      :label="item.label"
    >
      <span v-if="item.value === 'head_type'">{{ headTypeMap[rowData[item.value]] }}</span>
      <span v-else-if="item.value === 'invoice_type'">{{ invoiceTypeMap[rowData[item.value]] }}</span>
      <span v-else-if="item.value === 'total_fee'">{{ `￥${rowData[item.value]}` || '-' }}</span>
      <span v-else>{{ rowData[item.value] }}</span>
      <el-icon
        v-if="item.isCopy"
        class="copy"
        @click="onClickCopy(rowData[item.value])"
      ><CopyDocument /></el-icon>
    </el-form-item>
    <el-form-item label="纳税人证明">
      <ImgDownPreview :url="rowData.taxpayer_proof" />
    </el-form-item>
    <el-form-item label="发票" prop="imageUrl" :rules="[{ required: rowData.invoiceType === 1 ? true: false, message: '请上传发票'}]">
      <KImageUploader
        v-if="rowData.invoiceType === 1"
        ref="uploadRef"
        :file-list="fileList"
        :limit="1"
        accept="image/*,.zip,.rar,.7z"
        :on-before-upload="onBeforeUpload"
      >
        <template #default>
          <div class="add">
            <el-icon><Plus /></el-icon>
            <div>上传发票</div>
          </div>
        </template>
      </KImageUploader>
      <div v-else>
        {{ rowData.invoice_url ? rowData.invoice_url.split("com/")[1] : "-" }}
      </div>
    </el-form-item>
    <div class="title mb-10">开票订单</div>
    <KTable :data="rowData.orders" :columns="columns"> </KTable>
  </k-form-modal>
</template>

<script setup lang='ts'>
import { ref, computed, watch, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { ImgDownPreview } from '@/components/base-img';
import { useFormModal } from '@crud/index';
import { invoiceMake } from '@/api/crm-agency/kgj/invoice';
import { toolCopyText } from '@/utils';
import { KImageUploader } from '@/components/k-image-uploader';
import { invoiceTypeMap, headTypeMap } from '../hooks/use-table';
defineOptions({
  name: 'KgjInvoiceListModal'
});
const columns: any = [
  { label: '订单ID', prop: 'trade_no', minWidth: 100 },
  { label: '会员类型', prop: 'title', minWidth: 100 },
  { label: '支付方式', prop: 'trade_type', minWidth: 100 },
  { label: '订单金额', prop: 'total_fee', minWidth: 100 },
  { label: '支付时间', prop: 'add_time', minWidth: 170, type: 'dateTime' }
];
const rowData = ref<Record<string, any>>({});
const formRef = ref();
const emits = defineEmits(['success']);
const fileList = ref<any[]>([]);
const uploadRef = ref();
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  model: {
    invoiceId: undefined,
    imageUrl: undefined
  },
  rules: {
    // imageUrl: [{ required: false, message: '请上传发票' }]
  },
  onShow: (mode = 0, data: any) => {
    rowData.value = {};
    fileList.value = [];
    if (data) {
      rowData.value = data;
      state.model = {
        ...state.model,
        invoiceId: data.invoice_id
      };
    }
  },
  onSubmit: async (model: any, mode = 0) => {
    if (mode===1) {
      const res = await invoiceMake(model);
      if (!res.err) {
        ElMessage.success('开票成功');
        emits('success');
      }
      return res;
    }

  }
});
// 图片上传
const onBeforeUpload = (file: any) => {
  const { size } = file;
  /** 要求上传的文件应小与20M */
  if (size > 20 * 1024 * 1024) {
    ElMessage.error('文件大小应小于20M');
    return false;
  }
  return true;
};
// 复制
const onClickCopy = (content: string) => {
  toolCopyText(content);
  ElMessage.success('复制成功');
};
/**
 * @开票信息
 */
const typeAttrOptions1 = [
  { value: 'head_type', label: '开票主体' },
  { value: 'invoice_type', label: '发票类型' },
  { value: 'total_fee', label: '开票金额' },
  { value: 'invoice_head', label: '发票抬头', isCopy: true },
  { value: 'taxpayer_no', label: '税号', isCopy: true },
  { value: 'email', label: '电子邮箱', isCopy: true }
];
const typeAttrOptions2 = [
  { value: 'head_type', label: '开票主体' },
  { value: 'invoice_type', label: '发票类型' },
  { value: 'total_fee', label: '开票金额' },
  { value: 'invoice_head', label: '发票抬头', isCopy: true },
  { value: 'taxpayer_no', label: '税号', isCopy: true },
  { value: 'bank_user_name', label: '开户银行', isCopy: true },
  { value: 'bank_no', label: '开户行账号', isCopy: true },
  { value: 'bank_address', label: '注册地址', isCopy: true },
  { value: 'mobile', label: '公司电话', isCopy: true },
  { value: 'email', label: '电子邮箱', isCopy: true }
];
const typeAttrOptions = computed(() => {
  if (rowData.value.head_type === 0) {
    return typeAttrOptions1;
  } else if (rowData.value.head_type === 1) {
    return typeAttrOptions2;
  } else return [];
});
watch(() => uploadRef?.value?.getImgUrl(),
  (val) => {
    const imageUrl = state.model.imageUrl;
    state.model.imageUrl = val;
    nextTick(() => {
      if (val || (val !== imageUrl&& val === undefined)) formRef?.value.validateField('imageUrl');
    });
  },
  {
    immediate: false
  });
defineExpose({
  show: methods.show
});
</script>
<style lang="scss" scoped>
.mb-10 {
  margin-bottom: 10px;
}

.invoice-content {
  .copy {
    margin-left: 2px;
    cursor: pointer;
  }

  .add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
